<template>
  <view>
    <!-- 自定义导航栏 -->
    <uni-nav-bar :fixed="true" :border="false" :statusBar="true">
      <template v-slot:left>
        <!-- 已登录界面显示 -->
        <view class="display-default" style="height: 100%;" v-if="token">
          <view class="display-default navBar-title-left-text" style="margin-left: -10rpx;"
            :style="navBarTitleLeftTextIndexAndSwiperIndex == 0 ? 'font-size: 20px;color: #000;' : ''"
            @click="navBarTitleLeftItemClick(0)">数据</view>
          <!--  <view class="display-default navBar-title-left-text"
            :style="navBarTitleLeftTextIndexAndSwiperIndex == 1 ? 'font-size: 20px;color: #000;' : ''"
            @click="navBarTitleLeftItemClick(1)">动态</view> -->
        </view>
        <!-- 未登录界面显示 -->
        <view class="display-default" style="height: 100%;" v-else>
          <view class="display-default navBar-title-left-text"
            style="margin-left: -10rpx;width: 220rpx;font-size: 20px;color: #000;">个人中心</view>
        </view>
      </template>
      <template v-slot:right>
        <view class="display-default" style="height: 100%;">
          <!-- 设置按钮 -->
          <!--   <view class="display-default navBar-title-right-item" @click="navBarTitleRightItemClick('setting')">
            <image class="navBar-title-right-icon" src="../../static/myCenter/setting.svg"></image>
          </view> -->
          <!-- 消息按钮 -->
          <view class="display-default navBar-title-right-item" style="margin-right: -10rpx;"
            @click="navBarTitleRightItemClick('message')">
            <image class="navBar-title-right-icon" src="../../static/myCenter/message.svg">
              <uni-badge style="right: 5rpx;bottom: 15rpx;" :is-dot="true" :text="badgeText" absolute="rightTop"
                size="small"> </uni-badge>
            </image>
          </view>
        </view>
      </template>
    </uni-nav-bar>

    <!-- 用户基本信息 -->
    <view class="user-info" :style="token ? '' : 'margin: 0px;height:150rpx;'">
      <!-- 已登录界面显示 -->
      <view class="user-info-left" @click="toLoginPage">
        <image class="user-info-avatar"
          :src="user.avatar ? $url+user.avatar : '../../static/myCenter/defaultAvatar.png'"
          @click="previewImage(user.avatar ? $url+user.avatar : '../../static/myCenter/defaultAvatar.png')"></image>
        <view class="user-info-basic" @click="setUserInfo">
          <view>
            <text class="user-info-basic-name astrict-text" v-text="user.username ? user.username : '点击登录'"></text>
          </view>
          <view class="user-info-basic-signature astrict-text">
            <text v-text="token ? user.introduce || '点击编辑个性签名' : '登录解锁更多精彩内容'"></text>
          </view>
        </view>
      </view>

      <!-- 已登录界面显示 -->
      <view v-if="token">
        <text class="user-info-right-text">IP：{{Myprovince || '未知'}}</text>
      </view>
    </view>
    
    <!-- 我的发布、评论、获赞、历史浏览 -->
    <uni-row v-if="token">
      <uni-col :span="24/floatFunctionArray.length" v-for="(item, index) in floatFunctionArray" :key="index">
        <view class="userInfo_main_item" @click="floatFunctionClick(item.name)">
          <text style="font-size: 20px;">{{item.num}}</text>
          <text style="color: #7a7a7a;">{{item.name}}</text>
        </view>
      </uni-col>
    </uni-row>

    <view class="halving-line"></view>

    <!-- 内容主体 -->
    <swiper :style="{'height': swiperHeight}" class="swiper" :indicator-dots="false" :autoplay="false" :duration="150"
      :current="navBarTitleLeftTextIndexAndSwiperIndex" @change="currentChange">
      <!-- 数据 -->
      <swiper-item>
        <view id="oneDom">
          <!-- 功能页面入口 -->
          <view class="uni-list-item" v-for="(item, index) in functionArray" :key="index"
            @click="functionClick(item.id)">
            <view class="display-default" style="">
              </image>
              <image style="width: 40rpx;height: 40rpx;margin-right: 30rpx;" :src="item.imgUrl">
                <text>{{ item.name }}</text>
            </view>
          </view>
        </view>

        <!-- <view id="oneDom" style="height: 40vh;background: pink;display: flex;align-items: center;justify-content: center;" v-else>
          <text>点击重新加载</text>
        </view> -->
      </swiper-item>

      <!-- 动态 -->
      <!-- <swiper-item>
        <view id="twoDom">
          222
      </swiper-item> -->
    </swiper>

    <!-- #ifdef H5 -->
    <!-- 对话框H5：该功能需要登录后使用,是否登录？ -->
    <!-- 未登录界面显示 -->
    <uni-popup ref="loginPopup" type="center" backgroundColor="#fff">
      <view class="display-default popup-body">
        <text class="popup-title" style="color: #7a7a7a;">该功能需要登录后使用，是否登录？</text>
        <view class="display-default" style="width: 100%;">
          <button class="display-default button-toLogin" @click="loginDialogConfirm">去登录</button>
          <button class="display-default button-cancel" @click="loginDialogCancel">取消</button>
        </view>
      </view>
    </uni-popup>

    <!-- 对话框H5：确认登出 -->
    <!-- 退出界面提示 -->
    <uni-popup ref="loginOutPopup" type="center" backgroundColor="#fff">
      <view class="display-default popup-body">
        <text class="popup-title" style="color: #000;font-size: 18px;">确认登出</text>
        <view class="display-default" style="width: 100%;">
          <button class="display-default button-toLogin" @click="loginOutDialogConfirm">确定</button>
          <button class="display-default button-cancel" @click="loginOutDialogCancel">取消</button>
        </view>
      </view>
    </uni-popup>
    <!-- #endif -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 消息中心入口角标显示
        badgeText: 0,
        // 顶部标题栏索引id And 当前轮播图滑块所在的id
        navBarTitleLeftTextIndexAndSwiperIndex: 0,
        // 页面浮动功能列表
        floatFunctionArray: [{
            name: '我的发布',
            num: 0
          }, {
            name: '评论',
            num: 0
          },
          {
            name: '获赞',
            num: 0
          }, {
            name: '历史浏览',
            num: 0
          }
        ],
        // 页面下方功能列表
        functionArray: [{
            id: 1,
            imgUrl: '/static/myCenter/functionImgs/shield.svg',
            name: '安全与绑定'
          },
          {
            id: 2,
            imgUrl: '/static/myCenter/functionImgs/inform.svg',
            name: '推送设置'
          },
          {
            id: 3,
            imgUrl: '/static/myCenter/functionImgs/file-text.svg',
            name: '问题反馈 | 反馈Q群:703905247'
          },
          {
            id: 4,
            imgUrl: '/static/myCenter/functionImgs/settings-2.svg',
            name: '系统设置'
          },
          {
            id: 5,
            imgUrl: '/static/myCenter/functionImgs/info.svg',
            name: '关于App'
          },
          {
            id: 6,
            imgUrl: '/static/myCenter/functionImgs/close-circle.svg',
            name: '退出登录'
          }
        ],
        user: {},
        swiperHeight: '80vh', // 预设的swiper高度， 80vh屏幕高度
        Myprovince: '', // 自动获取的地理位置 [省]

        // 点击10次‘关于App’跳出设置Port端口和Ip地址的对话框
        lastTime: 0, // 上次点击时间
        count: 0, // 当前点击次数
        maxCount: 7, // 最大点击次数
        interval: 1000, // 当前点击时间离上次点击时间的间隔必须为多少
        token: ''
      };
    },
    // 生命周期/页面加载时
    async onLoad() {
      // 页面加载时获取 token
      this.token = await uni.getStorageSync('token')
      if (this.token) {
        // 查询用户基本信息
        await this.getUserInfo()
        await this.getAllNoticeByUid()
      } else {
        this.user = {}
        this.$forceUpdate()
      }

      // 获取当前省份信息
      uni.getLocation({
        type: "gcj02",
        geocode: true,
        success: (res) => {
          // 获取 湖南省 字符串
          let province = res.address.province

          // 从索引为0的位置，截取province.length - 1个长度返回
          this.Myprovince = province.slice(0, province.length - 1);
        }
      })

      // 页面加载时设置下方swiperItem高度，自适应高度
      await this.setSwiperHeight('#oneDom')
    },
    async onShow() {
      this.token = await uni.getStorageSync('token')
      if (this.token) {
        // 查询用户基本信息
        await this.getUserInfo()
      } else {
        this.user = {}
        this.$forceUpdate()
      }

      // 获取上一页面的返回消息体
      // 1. 从消息中心页面回来的（必须有进入过消息详情跳转页的）2. 从登陆页面回来的
      if (uni.getStorageSync('isUserMessageCenterToMyCenter') || uni.getStorageSync('isLoginViewToMyCenter')) {
        // 重新调用方法进行获取消息图标红点角标
        await this.getAllNoticeByUid()

        // 清空返回消息体
        uni.removeStorageSync('isUserMessageCenterToMyCenter')
        uni.removeStorageSync('isLoginViewToMyCenter')
      }
    },

    // 监听/下拉刷新
    onPullDownRefresh() {
      console.log("已刷新");
      setTimeout(() => {
        uni.stopPullDownRefresh()
      }, 500)
    },
    onTabItemTap(e) {
      uni.setStorageSync('tabItemName', '个人中心')
    },
    methods: {
      /**
       * @description ：根据学生uid查询用户需要接收的所有通知-有联合索引[noticeRelationId和uid组成联合索引]
       * 1. not in查询，根据学生id查询t_notice_relation表里是否有包含对应noticeId的通知，包含且已经删除则不予发送
       * 2. 如果用户注册时间大于通知时间则不予发送
       * 3. 如果t_notice_relation表里的通知记录已被删除则不予发送
       * @param token 请求头token参数
       */
      async getAllNoticeByUid() {
        await this.$http.notice.getAllNoticeInfoByUid(this.token).then(res => {
          // console.log("res: " + JSON.stringify(res));
          if (res.code == 401) {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              position: 'center'
            })
            return
          }
          if (!res.code) {
            uni.showToast({
              title: '服务器开小差了',
              icon: 'none',
              position: 'center'
            })
            return
          }

          // 获取到消息数据之后，循环查找看是否全部阅读过了
          for (let i = 0; i < res.data.length; i++) {
            // 如果有没阅读的
            if (res.data[i].isRead != 1) {
              // 显示消息图片红点角标
              this.badgeText = 1
              this.$forceUpdate()
              return
            }
          }

          // 如果没有未阅读的，角标取消
          this.badgeText = 0
          this.$forceUpdate()
        }).catch(err => {
          console.log("res: " + JSON.stringify(res));
        })
      },

      // 跳转到登录界面
      toLoginPage() {
        if (!this.token) {
          // 点击确定跳转到登录界面
          uni.navigateTo({
            url: `../loginView/loginView`
          })
        }
      },

      // 查询用户基本信息
      async getUserInfo() {
        await this.$http.user.getUserInfoByToken(this.token).then(res => {
          console.log("res: " + JSON.stringify(res));
          if (res.code == 401) {
            if (res.msg == '账户信息已过期，请重新登录') {
              // 清除用户缓存并刷新页面数据
              this.user = {}
              this.token = ''
              uni.removeStorageSync('token');
              this.$forceUpdate()
            }
            uni.showToast({
              title: res.msg,
              icon: 'none',
              position: 'center'
            })
            return
          } else if (!res.code) {
            // 服务器错误，获取不到数据
            // 清除用户缓存并刷新页面数据
            this.user = {}
            this.token = ''
            // uni.removeStorageSync('token');
            this.$forceUpdate()
            uni.showToast({
              title: '服务器开小差了',
              icon: 'none',
              position: 'center'
            })
            return
          }

          this.user = res.data
          this.floatFunctionArray[0].num = this.user.publishNum || 0
          this.floatFunctionArray[1].num = this.user.commentNum || 0
          this.floatFunctionArray[2].num = this.user.likeNum || 0
          this.floatFunctionArray[3].num = uni.getStorageSync(this.token + 'pressList').length || 0
        }).catch(err => {
          console.log("res: " + JSON.stringify(res));
        })
      },
      // 预料头像
      previewImage(imgUrl) {
        if (this.token) {
          uni.previewImage({
            urls: [imgUrl], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
            current: '' // 当前显示图片的http链接，默认是第一个
          })
        }
      },
      // 修改个人资料
      setUserInfo() {
        if (this.token) {
          uni.navigateTo({
            url: `../setUserInfoView/setUserInfoView`
          })
        }
      },
      // 对话框，是否跳转登录界面，是
      loginDialogConfirm() {
        // 点击确定跳转到登录界面
        uni.navigateTo({
          url: `../loginView/loginView`
        })

        this.$refs.loginPopup.close() // 然后关闭对话框弹窗
      },
      // 对话框，是否跳转登录界面，否
      loginDialogCancel() {
        return this.$refs.loginPopup.close()
      },
      // 浮动功能项点击
      floatFunctionClick(name) {
        console.log(name);
        if (!this.token) {
          // #ifdef H5
          this.$refs.loginPopup.open()
          return
          // #endif

          // #ifndef H5
          uni.navigateTo({
            url: "/pages/customPopup/customPopup?title=该功能需要登录后使用，是否登录？&confirmText=去登录&type=login"
          })
          return
          // #endif
        }

        if (name == '我的发布') {
          uni.navigateTo({
            url: '/pages/myPublish/myPublish'
          })
          return
        }

        if (name == '评论') {
          uni.navigateTo({
            url: '/pages/myComment/myComment'
          })
          return
        }

        if (name == '获赞') {
          uni.navigateTo({
            url: `/pages/customPopup/myLikeNum?username=${this.user.username}&likeNum=${this.floatFunctionArray[2].num}`
          })
          return
        }

        if (name == '历史浏览') {
          uni.navigateTo({
            url: '/pages/myHistoryBrowsing/myHistoryBrowsing'
          })
          return
        }
      },
      // 下方功能列表项点击
      functionClick(id) {
        if (!this.token && id != 5) {
          // #ifdef H5
          this.$refs.loginPopup.open()
          return
          // #endif

          // #ifndef H5
          uni.navigateTo({
            url: "/pages/customPopup/customPopup?title=该功能需要登录后使用，是否登录？&confirmText=去登录&type=login"
          })
          return
          // #endif
        }

        if (id == 1) {
          uni.navigateTo({
            url: `/pages/userSecurityBinding/userSecurityBinding`
          })
          return
        }

        if (id == 3) {
          // 拉取QQ并加入反馈交流群：群号 703905247
          let key = 'UcDbf53lSTbSokjp336josnAq8hOI5jP'; // 你的QQ群的key
          // #ifdef APP-PLUS
          plus.runtime.openURL(
            'mqqopensdkapi://bizAgent/qm/qr?url=http%3A%2F%2Fqm.qq.com%2Fcgi-bin%2Fqm%2Fqr%3Ffrom%3Dapp%26p%3Dandroid%26k%3D' +
            key);
          // #endif
          return
        }

        if (id == 5) {
          /**
           * lastTime: 0,
           * count: 0,
           * maxCount: 7,
           * interval: 1000,
           */

          // 记录当前点击时间
          const date = new Date()

          // 当前点击的时间戳 - 上次点击的时间戳 > 1000(毫秒ms)
          // 判断这次点击离上次点击间隔是否大于1000(毫秒ms)
          if (date.getTime() - this.lastTime > this.interval) {
            // 如果大于就重新计算，赋值为0
            this.count = 0
            this.lastTime = 0;
          }

          // 如果是第一次点击，就初始化
          if (this.count == 0) {
            this.count++;
            this.lastTime = date.getTime();
            return
          };

          // 点击间隔(毫秒ms)
          const currentInterval = date.getTime() - this.lastTime;
          // 判断这次点击离上次点击间隔是否小于1000(毫秒ms)
          if (currentInterval < this.interval) {
            if (this.count >= this.maxCount - 1) {
              // #ifdef H5
              // return this.$refs.loginOutPopup.open()
              return uni.navigateTo({
                url: "/pages/customPopup/setPortOrIp"
              })
              // #endif

              // #ifndef H5
              uni.navigateTo({
                url: "/pages/customPopup/setPortOrIp"
              })
              // #endif
              this.count = 0;
              this.lastTime = 0;
              return
            };

            // 如果小于就点击次数count++，
            this.count++;
            this.lastTime = date.getTime();

            if (this.count >= 3) {
              uni.showToast({
                title: `现在只需再执行${this.maxCount-this.count}步操作即可设置服务器地址`,
                icon: 'none',
                position: 'top'
              });
            }
            return
          };
          this.count = 0;
          this.lastTime = 0
        }

        if (id == 6) {
          // #ifdef H5
          return this.$refs.loginOutPopup.open()
          // #endif

          // #ifndef H5
          uni.navigateTo({
            url: "/pages/customPopup/customPopup?title=确认登出&titleStyle=color: #000;font-size: 18px;&type=loginOut"
          })
          return
          // #endif
        }

      },
      // 对话框，是否退出登陆，是
      loginOutDialogConfirm() {
        // 点击确定清除登陆数据并跳转登陆界面
        this.user = {}
        uni.removeStorageSync('token')

        uni.navigateTo({
          url: '/pages/loginView/loginView'
        });

        this.$refs.loginOutPopup.close() // 然后关闭对话框弹窗
      },
      // 对话框，是否退出登陆，否
      loginOutDialogCancel() {
        return this.$refs.loginOutPopup.close()
      },
      // 顶部标题栏左侧[数据、动态]点击时触发事件
      navBarTitleLeftItemClick(index) {
        // if (index == 0) {
        //   this.setSwiperHeight('#oneDom')
        // } else {
        //   this.setSwiperHeight('#twoDom')
        // }
        // this.navBarTitleLeftTextIndexAndSwiperIndex = index
      },
      // 顶部标题栏右侧[图标]点击时触发事件
      navBarTitleRightItemClick(index) {
        console.log(index);

        if (!this.token) {
          // #ifdef H5
          return this.$refs.loginPopup.open()
          // #endif

          // #ifndef H5
          return uni.navigateTo({
            url: "/pages/customPopup/customPopup?title=该功能需要登录后使用，是否登录？&confirmText=去登录&type=login"
          })
          // #endif
        }

        if (index == 'setting') {
          return uni.navigateTo({
            url: `../useSetting/useSetting`
          });
        }
        if (index == 'message') {
          return uni.navigateTo({
            url: `../userMessageCenter/userMessageCenter`
          });
        }
      },
      // swiper的current值改变时触发事件
      currentChange(e) {
        if (e.detail.current == 0) {
          this.setSwiperHeight('#oneDom')
        } else {
          this.setSwiperHeight('#twoDom')
        }
        this.navBarTitleLeftTextIndexAndSwiperIndex = e.detail.current
      },

      // 页面加载时运行，效果是自动获取当前页面的轮播高度并自适应
      async setSwiperHeight(element) {
        await new Promise((resolve, reject) => {
          // 延时设置高度 -- 一定要延时，否则报错 - 300毫秒一般都够了
          setTimeout(() => {

            // uniapp自带方法 - 获取DOM的高度等信息
            // https://uniapp.dcloud.net.cn/api/ui/nodes-info.html#createselectorquery

            // 节点查询
            const query = uni.createSelectorQuery().in(this)

            // 开始
            query.select(element).boundingClientRect(data => {

              // console.log("【DOM尺寸信息】" + JSON.stringify(data))

              // 获取DOM的高度， 单位是像素
              let h = data.height

              // 补上单位
              h += 'px'

              // 实际高度赋值给swiper
              this.swiperHeight = h

              console.log('【动态设置高度】', h)

            }).exec()

          }, 300)
        })
      }
    }
  }
</script>

<style lang="scss">
  // 全局背景色
  page {
    // background: #f6f6f6;
  }

  // 自定义导航栏样式
  /deep/ .uni-navbar__header {
    padding: 0px;
  }

  /deep/ .uni-navbar__header-btns-left {
    flex: 5;
  }

  /deep/ .uni-navbar__header-btns-right {
    flex: 5;
  }

  // 是否跳转登陆界面 对话框样式
  /deep/ .uni-popup__wrapper {
    border-radius: 15px;
  }


  .navBar-title-left-text {
    height: 100%;
    font-size: 16px;
    color: #444444;
    width: 120rpx;
    transition-property: font-size;
    transition-duration: 0.1s;
    transition-timing-function: ease-in;
  }

  .navBar-title-right-item {
    height: 100%;
    width: 80rpx;

    & .navBar-title-right-icon {
      width: 45rpx;
      height: 45rpx;
    }
  }

  // 用户基本信息
  .user-info {
    position: relative;
    // height: 250rpx;
    padding: 30rpx;
    // background: linear-gradient(180deg, #ff782f, #d15143);
    // background: linear-gradient(180deg, #ff7729, #d18562);
    background: #fff;
    // margin-bottom: 120rpx;
    display: flex;
    justify-content: space-between;

    & .user-info-left {
      height: 130rpx;
      display: flex;
      align-items: center;

      & .user-info-avatar {
        width: 130rpx;
        height: 130rpx;
        border-radius: 60px;
        margin-right: 25rpx;
        background: #fff;
      }

      & .user-info-basic {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;

        & .user-info-basic-name {
          max-width: 350rpx;
          margin-bottom: 25rpx;
          // color: #fff;
          font-size: 20px;
          display: flex;
          align-items: center;
        }

        & .user-info-basic-signature {
          max-width: 400rpx;
          font-size: 12px;
          color: #7d7d7d;
          // color: #27273b;
        }
      }
    }

    & .user-info-right-text {
      padding: 0 10rpx;
      font-size: 6px;
      color: #6d6d6d;
      background: #f9f9f9;
    }
  }

  // 中间功能页面入口 【我的发布、历史浏览等...】
  .userInfo_main_item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-bottom: 30rpx;
    background: #fff;
  }

  // 分割线
  .halving-line {
    width: 100%;
    background: #f5f5f5;
    height: 10rpx;
  }


  .popup-body {
    width: 600rpx;
    height: 300rpx;
    flex-direction: column;
    justify-content: space-around;

    & .popup-title {
      margin-top: 30rpx;
    }

    & .button-toLogin {
      background: #000;
      color: #fff;
      font-size: 15px;
      width: 42%;
      margin: 0;
      margin-right: 20rpx;
    }

    & .button-cancel {
      background: #f3f3f3;
      color: #7a7a7a;
      font-size: 15px;
      width: 42%;
      margin: 0;
    }
  }

  .uni-list-item {
    padding: 30rpx;
    font-size: 14px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .uni-list-item:active {
    background: #f0f0f0;
  }

  .uni-list-item::after {
    content: " ";
    display: inline-block;
    vertical-align: middle;
    height: 8px;
    width: 8px;
    border-width: 2px 2px 0 0;
    border-color: #000;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    border-radius: 1px;
  }
</style>
